<template>
  <div class="nav" :class="[navMenuState ? 'navMenuState' : '']">
    <div class="agent-wrap" @click.stop="openUserDrop">
      <span class="agent-img" :class="navMenuState ? 'fl' : ''">
        <span class="img-span" :class="getCurrentStatusColor">
          <img
            :src="doMain + '/' + userObj.userIcon"
            v-if="userObj.userIcon"
            alt=""
          />
          <img src="../../assets/img/userAgent.png" v-else alt="" />
        </span>
      </span>
      <span
        class="agent-name importantFontSize"
        v-show="navMenuState"
        :title="userObj.agentName || ''"
        >{{ userObj.agentName || '' }}</span
      >
      <UserDropdown ref="userDropdownRef"></UserDropdown>
    </div>
    <div class="nav-items">
      <scrollBar>
        <groupBarItem :groupSettings="groupSettings"></groupBarItem>
      </scrollBar>
    </div>
    <div class="nav-footer">
      <div v-if='!$store.state.oem.oemFlag' class="logoIcon" >
        <div class="logo-box" v-show="navMenuState">
          <p class="logo-title">容联<span class="circle"></span>七陌</p>
          <p class="version">Ver.7.0</p>
        </div>
      </div>
      <div v-else class="logoIcon oem"></div>
    </div>
  </div>
</template>
<script lang="ts">
import UserDropdown from '@/components/publicTop/UserDropdown.vue'
import { Component, Prop, Vue } from 'vue-property-decorator'
import scrollBar from '@/components/scrollBar/index.vue'
import groupBarItem from './groupBarItem.vue'
@Component({
  name: 'navIndex',
  components: { UserDropdown, groupBarItem, scrollBar }
})
export default class NavIndex extends Vue {
  @Prop() private subNavState!: boolean
  private $store: any
  private $route: any
  private $router: any
  private doMain: string = '' // 头像的七牛地址拼装

  private groupSettings: any = {
    toolBar: { title: '工作台' },
    data: { title: '数据' },
    app: { title: '应用' },
    management: { title: '管理' }
  }

  get navMenuState (): boolean { // 获取当前菜单的展开或者是收起状态
    return this.$store.state.common.navMenuState || false
  }

  get userObj () { // 座席信息
    return this.$store.state.common.session.user
  }

  get getCurrentStatusColor () {
    // 0 => 空闲   1 => 忙碌   2 => 呼叫中   3 =>振铃    4 =>通话中   5 => 整理   6=> 保持   7=> 静音   8 => 未连接  9 => 失效   100+ => 自定义状态
    const statusObj = this.$store.state.cti.currentStatusObj
    const orange = ['2', '3'] // 呼叫中, 振铃
    const green = ['4', '6', '7', '10', '11', '12'] // 通话中， 保持，静音, 咨询， 三方, 咨询来电
    return statusObj.statusNumber === '0' ? 'type-normal' : orange.indexOf(statusObj.statusNumber) > -1 ? 'type-orange' : green.indexOf(statusObj.statusNumber) > -1 ? 'type-green' : 'type-danger'
  }

  private openUserDrop () { // 点击头像展开下拉
    (this as any).$refs.userDropdownRef.open()
  }

  private beforeMount () {
    const initConfig = this.$store.state.common.initConfig
    this.doMain = initConfig ? initConfig.qiniuDomainMap.common : ''
  }
}
</script>
<style lang="stylus" scoped>
.nav
  position absolute
  left 0
  top 0
  width 68px
  height 100%
  background $bgc-gray
  z-index 99
  font-size 14px
.nav-p
  color $fc-gray4
  font-size 12px
  transform scale(0.8)
  margin 20px 0 6px 0
  &:before, &:after
    content ''
    border-top 1px solid #E8ECF8
    display inline-block
    width 20px
&:after
  width 62px !important
.V7_iconfont
  font-size 14px
  color $icon-gray
  padding-right 6px
.agent-wrap
  height 56px
  width 76px
  position absolute
  cursor pointer
  z-index 10
  background $bgc-gray
.agent-img
  width 32px
  height 32px
  margin 8px 12px 10px 12px
  display inline-block
  line-height 32px
  position relative
  img
    width 100%
    height 100%
    border-radius 50%
    display inline-block
    position absolute
    top 3px
    left 3px
  .img-span
    width 34px
    height 34px
    border-radius 50%
    display inline-block
.type-danger
  border 2px solid $c-danger
.type-normal
  border 2px solid $c-main
.type-green
  border 2px solid $c-green
.type-orange
  border 2px solid $c-warn
.agent-name
  padding-top 22px
  display inline-block
  max-width 4em
  text-overflow ellipsis
  overflow hidden
  white-space nowrap
  font-weight bold
  color $fc-gray
.nav-footer
  background $bgc-gray
  z-index 100
  position relative
.nav.navMenuState
  width 130px
  .logoIcon
    background url('../../assets/img/logo.png') no-repeat 20px 6px
    background-size 20px
.logoIcon
  width 100%
  height 58px
  line-height 38px
  text-align center
  color $fc-gray
  font-weight 500
  font-size 12px
  background url('../../assets/img/logo.png') no-repeat 20px 6px
  background-size 20px
  .circle
    margin 4px 3px
    display inline-block
    width 3px
    height 3px
    background $fc-gray
    border-radius 5px
  .logo-box
    width 70px
    text-align left
    margin-left 50px
    .logo-title
      padding-top 2px
  .version
    color $fc-gray4
    /* transform scale(.8) */
.logoIcon.oem
  background transparent!important
.nav-items
  width 100%
  margin-top 30px
  height calc(100vh - 68px)
  .wrap_nav
    position relative
  &:first-child
    margin-top 16px
.nav.navMenuState
  .agent-wrap
    width 128px
  .nav-items
    height calc(100vh - 68px)
::-webkit-scrollbar-track-piece
  background-color transparent
  -webkit-border-radius 0
::-webkit-scrollbar-thumb
  background-color transparent
  border 0
  border-radius 0
::-webkit-scrollbar
  width 0
  height 0
</style>
